<script setup></script>

<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <div class="welcome-content">
        <h1>欢迎使用轻客管家系统</h1>
        <p>
          这是一个现代化的企业管理系统，提供线索管理、商机管理、客户管理等核心功能。
        </p>
        <el-row :gutter="20" class="feature-grid">
          <el-col :span="6">
            <el-card class="feature-card">
              <el-icon size="40" color="#409eff"><Connection /></el-icon>
              <h3>线索管理</h3>
              <p>高效管理客户线索，提升转化率</p>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="feature-card">
              <el-icon size="40" color="#67c23a"><Opportunity /></el-icon>
              <h3>商机管理</h3>
              <p>跟踪商机进展，把握销售机会</p>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="feature-card">
              <el-icon size="40" color="#e6a23c"><User /></el-icon>
              <h3>客户管理</h3>
              <p>全面管理客户信息，建立长期关系</p>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="feature-card">
              <el-icon size="40" color="#f56c6c"><Setting /></el-icon>
              <h3>系统管理</h3>
              <p>灵活配置系统，满足企业需求</p>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.welcome-content {
  text-align: center;
}

.welcome-content h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: white;
}

.welcome-content p {
  font-size: 18px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.9);
}

.feature-grid {
  margin-top: 40px;
}

.feature-card {
  text-align: center;
  padding: 30px 20px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card h3 {
  margin: 15px 0 10px 0;
  color: #303133;
}

.feature-card p {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}
</style>
